<template>
  <div class="myInfo">
    <NavBar title="我的资料" path="/home/my" />
    <div class="content">
      <myCell title="头像" type="img" :value="userInfo.avatar"></myCell>
      <myCell title="昵称" :value="userInfo.nickname" class="nickname"></myCell>
      <myCell title="性别" :value="genderObj[userInfo.gender]"></myCell>
      <myCell title="地区" :value="area.city_list[userInfo.area]"></myCell>
      <myCell title="个人简介" :value="userInfo.intro"></myCell>
      <van-button color="#fff" block class="btn" @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
  </div>
</template>

<script>
// 导入cell 单元格组件
import myCell from './myCell.vue'
// 导入 mapState
import { mapState } from 'vuex'
// 导入 城市数据
import area from '@/assets/js/area.js'
// 导入 弹框
import { Dialog } from 'vant'
// 导入 token 操作
import { removeLocal } from '@/utils/local.js'

export default {
  components: {
    myCell
  },
  data () {
    return {
      // 解析性别的
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      },
      // 城市数据  import 导入的数据不能直接用 在这里解构一下
      area
    }
  },
  methods: {
    // 退出
    exit () {
      // 弹框
      Dialog.confirm({
        title: '标题',
        message: '你确定要退出吗'
      })
        .then(() => {
          // 删除 token
          removeLocal('token')
          // 改变 登录状态
          this.$store.commit('setIsLoign', false)
          // 跳转 登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  // 解决 背景颜色高度填不满的问题
  mounted () {
    document.querySelector('body').style.backgroundColor = '#f7f4f5'
  },
  destroyed () {
    document.querySelector('body').style.backgroundColor = '#fff'
  },
  computed: {
    // 获取 state中的用户数据
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less">
.myInfo {
  .content {
    padding: 16px @p15;
    background-color: #f7f4f5;
    .nickname {
      margin-top: 10px;
    }
    .btn {
      margin-top: 15px;
      .red {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #e40137;
        line-height: 22px;
        letter-spacing: 0px;
      }
    }
  }
}
</style>
